<template>
  <panel>
    <div class="container">
      <x-row v-show="show">
        <x-col :span="9">
          <div class="msg-box" :style="'height:' + chartHeight + 'px'">
            <div class="msg-content" v-for="data in sumData">
              <div class="content-box">
                <div class="number-box">
                  <span class="number" v-animated-number="data.value"></span>
                  <span class="unit">{{data.unit}}</span>
                </div>
                <div class="title">
                  <span>{{data.title}}</span>
                  <span class="change-type" :class="data.changeType" v-if="data.change">
                    <i class="icon"></i>
                    {{data.change}}
                  </span>
                </div>
              </div>
            </div>
          </div>

        </x-col>
        <x-col :span="15" class="failure-statistic">
          <div class="total" v-animated-number="0"></div>
          <pie :width="chartWidth" :height="chartHeight + 'px'" :options="chartOptions"></pie>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'alertNow',

  data () {
    return {
      chartWidth: '50px',
      chartHeight: 0,
      show: false,
      chartOptions: {},
      color: '#c23531'
    }
  },

  computed: {
    warnAccount () {
      let phases = this.$store.getters.phase
      if (!phases || !phases.length) {
        return []
      }

      return _.filter(phases, (item) => {
        return []
      })
    },
    sumData () {
      let device
      let block
      switch (this.$route.path.split('/')[1]) {
        case ':0':
          device = 26
          block = 22
          break
        case ':1':
          device = 4
          block = 2
          break
        case ':2':
          device = 4
          block = 2
          break
        case ':3':
          device = 4
          block = 2
          break
      }
      return [
        {
          title: '监控供配电设备',
          value: device,
          unit: '',
          change: '',
          changeType: 'dec'
        },
        {
          title: '监控区域',
          value: block,
          unit: '',
          change: '',
          changeType: 'add'
        },
        {
          title: '今日异常',
          value: 0,
          change: '',
          changeType: 'add'
        }
      ]
    },
    chartData () {
      let series = _.groupBy(this.warnAccount, 'room')
      let res = []
      for (let i in series) {
        res.push({
          name: i,
          value: series[i].length
        })
      }
      res = res.sort((a, b) => {
        return a.name > b.name
      })
      if (!res || !res.length) {
        this.color = '#61a0a8'
        return [{
          name: '无故障信息',
          value: 0
        }]
      }
      this.color = '#61a0a8'
      return [{
        name: '无故障信息',
        value: 0
      }]
    }
  },

  watch: {
    chartData (val, oldVal) {
      let change = JSON.stringify(val) !== JSON.stringify(oldVal)
      if (change) this.initChart()
    }
  },

  mounted () {
    setTimeout(() => {
      this.chartWidth = `${this.$el.clientWidth / 3 * 2 - 30}px`
      this.chartHeight = this.$el.clientHeight
      this.show = true
    }, 0)
    this.initChart()
  },

  methods: {
    initChart () {
      this.chartOptions = {
        title: {
          text: '当前故障数',
          x: 'center',
          bottom: 10,
          textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          position: 'inside',
          formatter: '{b}: {c} ({d}%)'
        },
        animation: false,
        color: [this.color],
        series: [{
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: this.chartData
        }]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'

.container {
}

.msg-box {
  padding: 6%;
  box-sizing: border-box;

  .msg-content {
    position relative
    width: 100%;
    height: 33.3%;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    color: #99A1A8;

    &:last-child {
      border-bottom: 0;
    }

    .content-box {
      position absolute
      top 50%
      left 10px
      transform translate(0, -50%)
    }

    .number-box {

      .number {
        margin-top: 10px;
        font-size: 20px;
        color: #fff;
      }

      @media screen and (max-height: 760px) {
        .number {
          font-size: 15px;
        }
      }
      @media screen and (max-height: 720px) {
        .number {
          font-size: 13px;
        }
      }
    }

    .title {
      position: relative;
      font-size: 12px;

      .change-type {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: green;

        .icon {
          display: inline-block;
          width: 13px;
          height: 13px;
          transform: rotate(90deg) translate(1px, -4px);
          background: url('../../../../assets/images/dec.png') no-repeat right bottom;
        }

        &.add {
          color: red;

          .icon{
            transform: rotate(-90deg) translate(-1px, 4px);
            background-image: url('../../../../assets/images/add.png');
          }
        }
      }
    }
  }
}

.failure-statistic {
  position: relative;

  .total {
    absolute: left -7px top 45%;
    margin-top: -20px;
    size: 100% 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
  }
}

</style>
